<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <!-- 主要内容区域 -->
    <scroll-view class="main-content" scroll-y enable-flex>
      <!-- 城市管理场景 -->
      <view class="section">
        <view class="section-header">
          <view class="section-icon">🏙️</view>
          <text class="section-title">城市管理场景</text>
        </view>
        <view class="module-grid">
          <view
            v-for="(item, index) in cityManagementModules"
            :key="index"
            class="module-item"
            @click="navigateToModule(item)"
          >
            <view class="module-icon" :style="{ background: item.bgColor }">
              <text class="icon">{{ item.icon }}</text>
            </view>
            <text class="module-name">{{ item.name }}</text>
            <!-- <view v-if="item.count > 0" class="module-badge">{{ item.count }}</view> -->
          </view>
        </view>
      </view>

      <!-- 运行安全场景 -->
      <view class="section">
        <view class="section-header">
          <view class="section-icon">🛡️</view>
          <text class="section-title">运行安全场景</text>
        </view>
        <view class="module-grid">
          <view
            v-for="(item, index) in safetyModules"
            :key="index"
            class="module-item"
            @click="navigateToModule(item)"
          >
            <view class="module-icon" :style="{ background: item.bgColor }">
              <text class="icon">{{ item.icon }}</text>
            </view>
            <text class="module-name">{{ item.name }}</text>
            <!-- <view v-if="item.count > 0" class="module-badge alert">{{ item.count }}</view> -->
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { commonApi } from "@/api/index.js";
import { onShow } from '@dcloudio/uni-app'
// 系统信息
const statusBarHeight = ref(0);
const currentTime = ref("");
let timeInterval = null;

// 数据概览
const overviewData = ref({
  totalEvents: 127,
  processing: 15,
  resolved: 98,
});
// 城市管理场景模块
const cityManagementModules = ref([
  {
    id: "street_occupation",
    name: "占道经营",
    icon: "🏪",
    bgColor: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
    count: 8,
    route: "/pages/subject/index",
  },
  {
    id: "garbage_exposure",
    name: "垃圾暴露",
    icon: "🗑️",
    bgColor: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
    count: 3,
    route: "/pages/subject/index",
  },
  {
    id: "bin_overflow",
    name: "垃圾桶满溢",
    icon: "🗂️",
    bgColor: "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)",
    count: 12,
    route: "/pages/subject/index",
  },
  {
    id: "illegal_parking",
    name: "违章停车",
    icon: "🚗",
    bgColor: "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)",
    count: 5,
    route: "/pages/subject/index",
  },
  {
    id: "homeless",
    name: "流浪乞讨",
    icon: "👤",
    bgColor: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
    count: 2,
    route: "/pages/subject/index",
  },
  {
    id: "storefront_business",
    name: "出店经营",
    icon: "🏬",
    bgColor: "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
    count: 7,
    route: "/pages/subject/index",
  },
]);

// 运行安全场景模块
const safetyModules = ref([
  {
    id: "crowd_density",
    name: "人员密集",
    icon: "👥",
    bgColor: "linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)",
    count: 3,
    route: "/pages/subject/index",
    level: "warning",
  },
  {
    id: "fire_road_block",
    name: "消防占道",
    icon: "🚒",
    bgColor: "linear-gradient(135deg, #ff6b6b 0%, #ffa500 100%)",
    count: 1,
    route: "/pages/subject/index",
    level: "danger",
  },
  {
    id: "high_altitude_fire",
    name: "高空火灾",
    icon: "🔥",
    bgColor: "linear-gradient(135deg, #ff4757 0%, #ff3838 100%)",
    count: 0,
    route: "/pages/subject/index",
    level: "safe",
  },
  {
    id: "waterlogging",
    name: "内涝积水",
    icon: "💧",
    bgColor: "linear-gradient(135deg, #3742fa 0%, #2f3542 100%)",
    count: 2,
    route: "/pages/subject/index",
    level: "warning",
  },
]);
// 方法定义
const updateTime = () => {
  const now = new Date();
  const month = String(now.getMonth() + 1).padStart(2, "0");
  const day = String(now.getDate()).padStart(2, "0");
  const hours = String(now.getHours()).padStart(2, "0");
  const minutes = String(now.getMinutes()).padStart(2, "0");

  currentTime.value = `${month}月${day}日 ${hours}:${minutes}`;
};

const refreshData = () => {
  console.log("刷新数据");
  uni.showToast({
    title: "数据已更新",
    icon: "success",
    duration: 1500,
  });

  // 模拟数据更新
  overviewData.value = {
    totalEvents: Math.floor(Math.random() * 200) + 100,
    processing: Math.floor(Math.random() * 30) + 10,
    resolved: Math.floor(Math.random() * 150) + 80,
  };
};

const navigateToModule = (module) => {
  console.log("导航到模块:", module.name);

  if (module.route) {
    uni.navigateTo({
      url: `${module.route}?id=${module.id}&name=${module.name}`,
    });
  } else {
    uni.showToast({
      title: `进入${module.name}模块`,
      icon: "none",
      duration: 1500,
    });
  }
};

// 生命周期
onMounted(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 0;

  // 开始更新时间
  updateTime();
  timeInterval = setInterval(updateTime, 60000); // 每分钟更新一次
});

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval);
  }
});
onShow(()=>{
  commonApi.getSystemResourceLoginInfo()
})
// 下拉刷新
const onPullDownRefresh = () => {
  refreshData();
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 1000);
};
</script>

<style lang="scss" scoped>
/* 全局样式 */
.container {
  min-height: 100vh;
  background: #f5f7fa;
}

.status-bar {
  background: transparent;
}

/* 顶部标题区域 */
.header {
  position: relative;
  height: 300rpx;
  overflow: hidden;

  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    &::after {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="60" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="80" r="2.5" fill="rgba(255,255,255,0.1)"/><circle cx="10" cy="80" r="1.5" fill="rgba(255,255,255,0.1)"/></svg>')
        repeat;
      animation: float 20s linear infinite;
    }
  }

  .header-content {
    position: relative;
    z-index: 2;
    padding: 60rpx 40rpx 40rpx;

    .title {
      font-size: 48rpx;
      font-weight: 600;
      color: #ffffff;
      margin-bottom: 10rpx;
    }

    .subtitle {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 20rpx;
    }

    .time-info {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  position: relative;
  z-index: 3;
}

/* 数据概览卡片 */
.overview-card {
  margin: 40rpx 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.1);

  .card-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;

    .refresh-btn {
      padding: 8rpx;

      .refresh-icon {
        font-size: 28rpx;
        color: #667eea;
      }
    }
  }

  .overview-stats {
    display: flex;
    justify-content: space-around;

    .stat-item {
      text-align: center;

      .stat-number {
        display: block;
        font-size: 48rpx;
        font-weight: bold;
        color: #667eea;
        margin-bottom: 8rpx;
      }

      .stat-label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

/* 区域样式 */
.section {
  margin: 0 30rpx 40rpx;

  .section-header {
    display: flex;
    align-items: center;
    margin: 30rpx 0;

    .section-icon {
      font-size: 32rpx;
      margin-right: 15rpx;
    }

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
  }
}

/* 模块网格 */
.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.module-item {
  position: relative;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  }

  .module-icon {
    width: 80rpx;
    height: 80rpx;
    margin: 0 auto 20rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .icon {
      font-size: 36rpx;
    }
  }

  .module-name {
    font-size: 24rpx;
    color: #333;
    line-height: 1.2;
  }

  .module-badge {
    position: absolute;
    top: 15rpx;
    right: 15rpx;
    min-width: 32rpx;
    height: 32rpx;
    background: #ff4757;
    color: #ffffff;
    font-size: 20rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8rpx;

    &.alert {
      background: #ff4757;
      animation: pulse 2s infinite;
    }
  }
}

/* 工具列表 */
.tool-list {
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
}

.tool-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  transition: background-color 0.3s ease;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f8f9fa;
  }

  .tool-icon {
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 24rpx;
    font-size: 32rpx;
  }

  .tool-content {
    flex: 1;

    .tool-name {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 8rpx;
    }

    .tool-desc {
      font-size: 24rpx;
      color: #999;
      line-height: 1.3;
    }
  }

  .arrow {
    color: #ccc;
    font-size: 28rpx;
  }
}

.safe-area-bottom {
  height: 40rpx;
}

/* 动画效果 */
@keyframes float {
  0% {
    transform: translateX(0) translateY(0);
  }

  100% {
    transform: translateX(-100px) translateY(-100px);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

/* 响应式调整 */
@media (max-width: 750rpx) {
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
